﻿<template>
  <div>
		<div class="radio-btn" :class="{active: value==item.value}" v-for="(item, index) in radioData" @click="show(item, index)" :value="item.value">
			{{item.label}}
		</div>
  </div>
</template>

<script>
export default {
  data () {
    return {   
    }
  },
  props: {
  	value: {default: ''},
  	radioData: {
  		default: [{
    		value: '',
    		label: '全部',
    		name: 'type'
    	}]
  	}
  },
  methods: {
  	show (item, index) {
  		if (item.value != this.value) {  			
	  		this.$emit('input', item.value);
	  		this.$emit('change', item.value);
  		}
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.radio-btn
	position: relative;
	height: 26px;
	line-height: 26px;
	padding: 0px 8px;
	font-size: 12px;
	color: #1F2D3D;
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;
	cursor: pointer;
	&.active
		background: #0099FA;
		border-radius: 2px;
		color: #fff;
</style>
